---
import { Image } from "astro:assets";
import Code2promptLogo from "/src/assets/logo_light_v0.0.1.svg";
---

<section
  id="header"
  class="w-full bg-gradient-to-b from-gray-900 to-blue-900 text-white py-16 min-h-[100vh] relative"
>
  <div class="flex flex-col items-center justify-center p-8">
    <a href="/docs/welcome">
      <Image
        src={Code2promptLogo}
        alt="Code2Prompt Logo"
        class="h-[180px] mx-auto"
      />
    </a>

    <h1 class="text-4xl font-bold mt-6 mb-2">Code2Prompt</h1>

    <p class="text-xl text-center mt-2 mb-8 max-w-2xl">
      Transform Your Code into AI-Optimized Prompts in Seconds
    </p>

    <div class="flex gap-4 flex-wrap">
      <a href="/docs/welcome">
        <button
          class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200"
        >
          Documentation
        </button>
      </a>
      <a href="/docs/how_to/install">
        <button
          class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200"
        >
          Installation
        </button>
      </a>
    </div>
  </div>

  <!-- Scroll Indicator Arrow -->
  <div
    id="scroll-indicator"
    class="absolute bottom-8 opacity-70 hover:opacity-100 transition-all duration-300 cursor-pointer"
    style="left: 50%; transform: translateX(-50%);"
  >
    <svg
      width="32"
      height="32"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="text-white drop-shadow-lg block"
    >
      <path
        d="M7 10L12 15L17 10"
        stroke="currentColor"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"></path>
    </svg>
  </div>
</section>

<script>
  // Handle scroll indicator visibility
  const scrollIndicator = document.getElementById("scroll-indicator");

  function handleScroll() {
    if (scrollIndicator) {
      if (window.scrollY > 50) {
        // Hide arrow when scrolled down
        scrollIndicator.style.opacity = "0";
        scrollIndicator.style.transform = "translateX(-50%) translateY(20px)";
        scrollIndicator.style.pointerEvents = "none";
      } else {
        // Show arrow when at top
        scrollIndicator.style.opacity = "0.7";
        scrollIndicator.style.transform = "translateX(-50%) translateY(0)";
        scrollIndicator.style.pointerEvents = "auto";
        scrollIndicator.style.display = "block";
      }
    }
  }

  // Add scroll event listener
  window.addEventListener("scroll", handleScroll);

  // Handle click on scroll indicator
  if (scrollIndicator) {
    scrollIndicator.addEventListener("click", () => {
      window.scrollTo({
        top: window.innerHeight,
        behavior: "smooth",
      });
    });
  }
</script>

<style>
  @keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
    40%,
    43% {
      transform: translateX(-50%) translateY(-10px);
    }
    70% {
      transform: translateX(-50%) translateY(-5px);
    }
    90% {
      transform: translateX(-50%) translateY(-2px);
    }
  }

  #scroll-indicator {
    animation: bounce 2s infinite;
  }
</style>
